import React from "react";
import BaseComponent from "../../../redare/components/BaseComponent";
import {Form, Input, Modal} from "antd";
import ContainerComponent from "../../common/ContainerComponent";
import RoleSelect from "../../../redare_components/webplatform_workbench/components/role/RoleSelect";
import UserPresenter from "../../../.gen/presenter/UserPresenter";

export default class UserAddFormModal extends BaseComponent {

    formRef = React.createRef();

    constructor(props) {
        super(props);
        this.state = {
            visible: false,
            loading: false
        };
        this.presenter = new UserPresenter(this)
    }

    getCurUser(id) {
        this.presenter.getUser(
            {id},
            {},
            (result) => {
                let {data} = result;
                if (data) {
                    this.formRef.current.setFieldsValue(data)
                }
            }
            )
    }

    _onAddOkBtn() {
        this.formRef.current.validateFields()
            .then(values => {
                let {userId} = this._form;
                if (userId) {
                    values.where = {userId: userId};
                    this._editUser(values)
                } else {
                    this._addUser(values)
                }
            })
    }

    _editUser(values) {
        this.setButtonLoading(true);
        this.presenter.editUser(
            values,
            {},
            () => {
                this._successCallback("编辑")
            },
            () => {
                this.setButtonLoading(false)
            }
        )
    }

    _addUser(values) {
        this.setButtonLoading(true);
        this.presenter.addUser(
            values,
            {},
            () => {
                this._successCallback("添加")
            },
            () => {
                this.setButtonLoading(false)
            }
        )
    }

    render() {
        let required = this._form.userId === undefined;
        return (
            <Modal
                title={`${required ? "新增" : "编辑"}用户`}
                visible={this.state.visible}
                confirmLoading={this.state.loading}
                onOk={this._onAddOkBtn.bind(this)}
                onCancel={() => this.setModalVisible(false)}
                maskClosable={false}
                destroyOnClose={true}
                centered={true}
                okText={'确定'}
                cancelText={'取消'}
            >
                <div className="TheNewPosition">
                    <Form ref={this.formRef} labelCol={{span: 6}} wrapperCol={{span: 18}}>
                        <Form.Item label="姓名" name="name" rules={[{required: true, message: '姓名不能为空'}]}>
                            <Input name="" placeholder="请输入姓名"/>
                        </Form.Item>
                        <ContainerComponent isRender={required}>
                            <Form.Item label="账号" name="account" rules={[{required: required, message: '账号不能为空'}]}>
                                <Input name="" placeholder="请输入账号" autoComplete="off"/>
                            </Form.Item>
                            <Form.Item label="角色" name="roleIds" rules={[{required: required, message: '角色不能为空'}]}>
                                <RoleSelect platform={"root"} value={this.state.value}
                                            onValueChange={this._onRoleValueChange.bind(this)}/>
                            </Form.Item>
                            <Form.Item label="密码" name="pwd" rules={[{required: required, message: '密码不能为空'}]}>
                                <Input.Password placeholder="请输入密码"/>
                            </Form.Item>
                            <Form.Item label="确认密码" name="pwd1" rules={[{required: required, message: '请确认密码'}]}>
                                <Input.Password placeholder="请输入确认密码"/>
                            </Form.Item>
                        </ContainerComponent>
                        <Form.Item label="电话" name="mobile" rules={[{required: true, message: '电话不能为空'}]}>
                            <Input placeholder="请输入电话" autoComplete="off"/>
                        </Form.Item>
                        <Form.Item label="邮箱" name="email">
                            <Input placeholder="请输入邮箱" autoComplete="off"/>
                        </Form.Item>
                    </Form>
                </div>
            </Modal>
        );
    }

    setModalVisible(visible) {
        this.setState({visible})
    }

    setButtonLoading(loading) {
        this.setState({loading})
    }

    _show(userId) {
        if (userId) {
            this._form.userId = userId;
            this.getCurUser(userId)
        }
        this.setModalVisible(true)
    }

    _onRoleValueChange(value) {
        this.formRef.current.setFieldsValue({roleIds: value})
    }

    _successCallback(content) {
        this.toastSuccess(`${content}成功`);
        this.setButtonLoading(false);
        this.setModalVisible(false);
        if (this.props.refresh) {
            this.props.refresh()
        }
    }

}